<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>控制台 | Anim</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.4.11/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1/dist/vue-resource.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.2/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-cookies@1.5.12/vue-cookies.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.4.11/lib/index.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:8091/js/nix.utils.js"></script>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
.el-menu {
	border-right: 0;
}
.el-menu--horizontal>.el-menu-item {
    float: right;
}
.el-menu--horizontal>.el-submenu {
    float: right;
}
.el-menu-item a {
	color: rgb(255, 255, 255);
    text-decoration: none;
}
.el-menu-item.is-active a {
    color: rgb(0, 193, 222);
}
.el-input-group__prepend {
	width: 80px;
}
</style>
</head>
<body>
<div id="appIndex">
<el-container>
	<el-header style="position: fixed; width: 100%; left: 0; top: 0; z-index: 1030 !important; padding: 0; background-color: #252a2f;">
		<jsp:include page="common/header.jsp" />
	</el-header>
	<el-main style="position: absolute; width: 100%; top: 60px; bottom: 0; padding: 0;">
		<el-container>
			<el-aside style="position: fixed; left: 0; top: 60px; bottom: 0; width: 240px; background-color: #252a2f;">
				<jsp:include page="common/left.jsp" />
			</el-aside>
			<el-main style="margin-left: 240px;">
				<div id="iframe" style=""></div>
			</el-main>
		</el-container>
	</el-main>
</el-container>

<el-dialog title="修改密码" :visible.sync="dialogChangePwdVisible" width="500px" @close="dialogChangePwdClose">
	<el-form ref="formChangePwd" :model="modelChangePwd" status-icon :rules="rulesChangePwd">
		<el-form-item label="旧密码" :label-width="formChangePwdLabelWidth" prop="oldPassword">
			<el-input v-model="modelChangePwd.oldPassword" type="password" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="新密码" :label-width="formChangePwdLabelWidth" prop="newPassword">
			<el-input v-model="modelChangePwd.newPassword" type="password" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="确认新密码" :label-width="formChangePwdLabelWidth" prop="newPasswordConfirm">
			<el-input v-model="modelChangePwd.newPasswordConfirm" type="password" autocomplete="off"></el-input>
		</el-form-item>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="dialogChangePwdVisible = false">取 消</el-button>
		<el-button type="primary" :loading="isButtonLoadingChangePwd" @click="onSubmitChangePwd">确 定</el-button>
	</div>
</el-dialog>
</div>
</body>
<script>
	Vue.component('menu-tree', {
	    name: "menu-tree",
	    template: `
			<div>
				<template v-for = "item in menus">
					<el-submenu v-if="item.data.isParent" :index="item.id + ''">
						<template slot="title">
							<i :class="item.data.icon"></i>
							<span>{{ item.name }}</span>
						</template>
						<menu-tree :menus = "item.children"></menu-tree>
					</el-submenu>
					<el-menu-item v-else :index="item.data.url">
						<a :href="item.data.url" onclick="return false;">
							<i :class="item.data.icon"></i>
							<span slot="title">{{ item.name }}</span>
						</a>
					</el-menu-item>
				</template>
			</div>		
		`,
	    props:["menus"],
	});
	
	var _token = this.$cookies.get('NIX_ANIM_USER_SESSION');
	var appIndex = new Vue({
		el: '#appIndex',
		data() {
			var checkOldPassword = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('请输入旧密码'));
		        } else {
		        	callback();
		        }
			};
			var checkNewPassword = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('请输入新密码'));
		        } else if (value === this.modelChangePwd.oldPassword) {
		            callback(new Error('新旧密码不能相同!'));
		        } else {
		        	callback();
		        }
			};
			var checkNewPasswordConfirm = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('请再次输入新密码'));
		        } else if (value !== this.modelChangePwd.newPassword) {
		            callback(new Error('两次输入密码不一致!'));
		        } else {
		        	callback();
		        }
			};
			return {
				username: '',
				urlJsonpGetUserByToken: 'http://localhost:8098/api/user/token/' + _token,
				urlGetLogout: 'http://localhost:8098/api/user/logout/' + _token,
				urlLogin: 'http://localhost:8098/login.html',
				urlJsonpChangePwd: 'http://localhost:8098/api/user/changepwd/' + _token,
				urlJsonpUserMenu: 'http://localhost:8098/api/user/menu/' + _token,
				modelChangePwd: {
					oldPassword: '',
					newPassword: '',
					newPasswordConfirm: ''
		          },
		        rulesChangePwd: {
		        	oldPassword: [{validator: checkOldPassword, trigger: 'blur'}],
		        	newPassword: [{validator: checkNewPassword, trigger: 'blur'}],
		        	newPasswordConfirm: [{validator: checkNewPasswordConfirm, trigger: 'blur'}]
				},
				dialogChangePwdVisible: false,
				formChangePwdLabelWidth: '100px',
				isButtonLoadingChangePwd: false,
				dataUserMenu: [],
				activeIndexLeft: 'http://localhost:8093/?page=/cms-site'
			}
		},
		methods: {
			handleSelectHeader(key, keyPath) {
	        	//console.log(key, keyPath);
	        	if (key == 'indexLogout') {
	        		if (_token) {
						this.$http.jsonp(this.urlGetLogout).
						then(function(response) {
							if (response.body.status == 200) {
								location.href = this.urlLogin;
							}
						}).catch(function (error) {
							console.log(error);
						});
					}
	        	}
	        	if (key == 'indexChangePwd') {
	        		this.dialogChangePwdVisible = true;
	        	}
	      	},
	      	handleSelectLeft(key, keyPath) {
	        	var thisDomain = window.location.host;
	        	var urlDomain = getDomainFromURL(key);
				if (thisDomain == urlDomain) {
					if (getUrlParam(key, 'page')) {
						this.openToMain(getUrlParam(key, 'page'));
					} else {
						location.href = key;
					}					
				} else {
					location.href = key;
				}
				this.activeIndexLeft = key;
	      	},
	      	openToMain(url) {
	        	if (url) {
	        		this.$http.get(url).then(function(response) {
	        			$("#iframe").html(response.body);
	    			}).catch(function (error) {
	    				location.href = "/";
					});	
	        	}	      		
	      	},
	      	handleOpenLeft(key, keyPath) {
				//console.log(key, keyPath);
			},
			handleCloseLeft(key, keyPath) {
				//console.log(key, keyPath);
			},
			resetFormChangePwd() {
				this.modelChangePwd = {
						oldPassword: '',
						newPassword: '',
						newPasswordConfirm: ''
				};
				this.$refs.formChangePwd.resetFields();
			},
			dialogChangePwdClose() {
				this.resetFormChangePwd();
			},
			onSubmitChangePwd() {
        		if (_token) {
					this.$refs.formChangePwd.validate((valid) => {
						if (valid) {
							this.isButtonLoadingChangePwd = true;
							this.$refs.formChangePwd.$http.jsonp(this.urlJsonpChangePwd, {params: this.modelChangePwd})
							.then(function (response) {
								if (response.body.status == 200) {
									this.$message({
										message: "修改成功",
										type: "success"
									});
									appIndex.isButtonLoadingChangePwd = false;
									appIndex.dialogChangePwdVisible = false;
								} else {
									this.$message.error(response.body.msg);
									appIndex.resetFormChangePwd();
									appIndex.isButtonLoadingChangePwd = false;
								}
							}).catch(function (error) {
								console.log(error);
							});	
						}
					});
        		}
			},
			loadUserMenu() {
				if (_token) {
					this.$http.jsonp(this.urlJsonpUserMenu).
					then(function(response) {
						if (response.body.status == 200) {
							this.dataUserMenu = response.body.data;
						} else {
							location.href = this.urlLogin;
						}
					}).catch(function (error) {
						console.log(error);
					});	
				}
			}
		},
		mounted() {
		},
		created() {
			this.loadUserMenu();
			
			var thisUrl = window.location.href;
			if (getUrlParam(thisUrl, 'page')) {
				this.openToMain(getUrlParam(thisUrl, 'page'));
				this.activeIndexLeft = thisUrl;
			} else {
				this.openToMain('/cms-site');
				this.activeIndexLeft = 'http://localhost:8093/?page=/cms-site';
			}

			if (_token) {
				this.$http.jsonp(this.urlJsonpGetUserByToken).
				then(function(response) {
					if (response.body.status == 200) {
						var username = response.body.data.username;
						this.username = username;
					} else {
						location.href = this.urlLogin;
					}
				}).catch(function (error) {
					console.log(error);
				});	
			}
		}
	})
</script>
</html>